<template>
	<view class="pages">
		<!-- #ifndef H5 -->
		<statusBar></statusBar>
		<!-- #endif -->
		<!-- 搜索功能 -->
		<view class="bgcf" @click="topage('/pages/list/search/search')">
			<uni-search-bar v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled placeholder="商品搜索" />
		</view>
		<u-swiper :list="lunb"></u-swiper>
		<view class="card">
			<view class="colBox jcsb">
				<view class="colBox">
					<span class="fwb">信息公告</span>
					<span class="c9 mgl10 mgr10">|</span>
					<span class="c9">圈子平台介绍</span>
				</view>
				<span class=""><u-icon name="arrow-right" color="#999" size="16"></u-icon></span>
			</view>
			<u-divider></u-divider>
			<view>
				<u-grid :border="false" col="5">
					<u-grid-item v-for="item in mySelf" :key="item.name" @click="toPage(item.url)">
						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.name" :size="22"></u-icon>
						<text class="grid-text">{{ item.title }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="card mgt40">
			<view class="colBox jcsb">
				<view class="flex column">
					<view class="flex jcc">
						<span class="fwb fs32">
							平台·新品首发
							<span class="cr fs24">NEW~</span>
						</span>
					</view>
					<view class="c9 fs24">平台最新上架</view>
				</view>
				<span class="flex aic">
					更多
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</span>
			</view>

			<view v-if="dataList.length">
				<shopList :dataList="dataList"></shopList>
			</view>
			<!-- <up-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png"></up-empty> -->
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const lunb = ['https://cdn.uviewui.com/uview/swiper/swiper1.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper3.png'];
const mySelf = [
	{
		name: 'chat',
		title: '跑腿服务',
		url: '111'
	},
	{
		name: 'rmb-circle',
		title: '骑手招募',
		url: '112'
	},
	{
		name: 'car',
		title: '校园店铺',
		url: '113'
	},
	{
		name: 'checkmark-circle',
		title: '所有店铺',
		url: '114'
	},
	{
		name: 'order',
		title: '店铺入驻',
		url: '115'
	}
];
const keyword = ref();
function topage(url) {
	uni.navigateTo({
		url
	});
}
const dataList = ref([]);
const shopObj = uniCloud.importObject('mall-goods');
const queryList = async () => {
	let res = await shopObj.getHotGoods();
	dataList.value = res.data;
	console.log(res);
};

// 测试数据库
onLoad(() => {
	queryList();
});
</script>

<style scoped lang="scss">
.bgcf {
	background-color: #fff;
}

.card {
	border-radius: 10rpx;
	background-color: #fff;
	padding: 25rpx;

	.colBox {
		display: flex;
		flex-direction: row;
		font-size: 28rpx;
	}

	.grid-text {
		font-size: 24rpx;
		color: #909399;
		padding: 0 5rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
}
</style>
